<template>
	<div>
		<div class="header">
			<router-link to='/pc/pchome'>

				<div class="bkcc">
					<h3>
						禄柒书城
					</h3>
					<img v-show="img!=null" :src="'http://127.0.0.1/api/public/showimg/'+img" />
				</div>
			</router-link>
			<div class="cart">
				<span @click="cart()">|| 我的购物车 | </span>
				<span @click="order()">| 我的订单 ||</span>
			</div>
			<div style="margin-top: 5px;">
				<router-link to="/pc/enroll">免费注册</router-link>
			</div>
			<div style="margin-top: 5px;">
				<router-link to="/moblie/home">移动端</router-link>
			</div>
			<span v-if="nickname==null">
				你好！<router-link to="/pc/login">请登录</router-link>
			</span>
			<div class="headerhello" v-if="nickname!=null ">
				<a @click="user">
					你好！{{nickname}} |
				</a>
				<span class="span" @click="logout()">退出登录</span>
			</div>
		</div>
		<div class="body">
			<router-link to='/pc/pchome'>
				<img src="../../../assets/img/pc/cart.png" />
			</router-link>
			<div class="search">
				<PCSearch></PCSearch>
			</div>
			<div class="cart">
				<Cartbtn></Cartbtn>
			</div>
		</div>
		<div style="height: 2px; background-color:  #ff4e00; margin-bottom: 2px ; margin-top: 2%;"></div>
	</div>
</template>

<script>
	import PCSearch from '@/components/pcbook/pcview/Searchbox/PCSearch.vue';
	import Cartbtn from '@/components/pcbook/pcview/Searchbox/Cartbtn.vue';
	export default {
		name: 'Header',
		components: {
			PCSearch,
			Cartbtn,
		},
		data() {
			return {
				account: '',
				nickname: '',
				img: '',
			}
		},
		methods: {
			logout() {
				localStorage.removeItem('token');
				localStorage.removeItem('account');
				localStorage.removeItem('name');
				localStorage.removeItem('img');
				localStorage.removeItem('role');
				localStorage.removeItem('vuex');
				this.account = '';
				this.nickname = null;
				this.img = null;
			},
			cart() {
				if (this.nickname == null) {
					alert('未登录！请先登录');
					this.$router.push('/pc/login');
				} else {
					this.$router.push('/pc/cart');
				}
			},
			order() {
				if (this.nickname == null) {
					alert('未登录！请先登录');
					this.$router.push('/pc/login');
				} else {
					this.$router.push('/pc/order');
				}
			},
			user() {
				this.$router.push('/pc/user');
			}
		},
		created() {
			this.account = localStorage.getItem('account');
			this.nickname = localStorage.getItem('name');
			this.img = localStorage.getItem('img');
		}
	}
</script>

<style scoped>
	.header {
		height: 40px;
		width: 100%;
		display: flex;
		justify-content: space-around;
		background-color: #eaeaea;

	}
	
	.bkcc{
		display: flex;
		justify-content: flex-start;
		text-align: center;
	}
	.bkcc h3{
		margin-top: 5px;
		margin-left: 10px;
	}
	.bkcc img{
		margin: auto;
	}
	.header span {
		cursor: pointer;
		color: #50a6fe;
	}

	.header .cart {
		display: flex;
		text-align: center;
		margin-top: 5px;
	}

	.header img {
		width: 40px;
		height: 40px;
		border-radius: 50%;
	}

	.header .headerhello {
		display: flex;
		justify-content: flex-start;
		text-align: center;
		margin-top: 5px;
	}

	.header .headerhello span {
		color: #999ba1;
	}

	.body {
		width: 100%;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: space-around;
		padding: 10px 0px;
	}

	.body img {
		margin-left: 100px;
		height: 110px;
	}

	.body .search {
		margin-left: 200px;
		width: 40%;
	}

	.body .cart {
		width: 30%;
	}

	.body .cart img {
		height: 50px;
	}
</style>